<template>
  <div>
    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="#">热门</van-index-anchor>
      <div class="list">
        <template v-for="city of groupData.hotCities">
          <div class="city" @click="cityClick(city)">{{city.cityName}}</div>
        </template>
      </div>
      <template v-for="item of groupData.cities">
        <van-index-anchor :index="item.group"/>
        <van-cell  
          v-for="city in item.cities" 
          :key="city.cityId"
          :title="city.cityName"
          @click="cityClick(city)" />
      </template>
  </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import useCityStore from '@/store/modules/city'
import { useRouter } from 'vue-router'

const cityStore = useCityStore()
const router = useRouter()

const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({})
  }
})

const indexList = computed(() => {
  let temp = props.groupData.cities?.map(item => item.group)
  temp?.unshift("#")
  return temp
})

const cityClick = (city) => {
  cityStore.currentCity = city
  router.back()
}
</script>

<style lang='less' scoped>
.list{
  display: flex;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;
  flex-wrap: wrap;
  .city{
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    margin: 10px 0;
    background-color: #fff4ec;
  }
}
</style>